<style>
    #label-add {
        padding: 20px 25px 25px 0;
    }
    .layui-form-label.layui-required:after{
        content:"*";
        color:red;
        position: absolute;
        top:5px;
        left:15px;
    }
</style>
<div class="layui-fluid" id="label-add">
    <form class="layui-form" action="" lay-filter="user-add-form">
        <fieldset class="layui-elem-field layui-field-title" style="">
            <legend style="font-size: 15px; font-weight: bolder;">标签名称</legend>
        </fieldset>
        <!--<div class="layui-row">-->
            <!--<div class="layui-col-md10">-->
                <!--<div class="layui-form-item">-->
                    <!--<div class="layui-form-item">-->
                        <!--<label class="layui-form-label layui-required">请起名</label>-->
                        <!--<div class="layui-input-inline">-->
                            <!--<input type="text" name="mediaLabelName" autocomplete="off" class="layui-input">-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label layui-required">请起名：</label>
                <div class="layui-input-inline">
                    <input type="text" name="mediaLabelName" autocomplete="off" placeholder="请输入标签名" class="layui-input">
                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="">
            <legend style="font-size: 15px; font-weight: bolder;">批量查询</legend>
        </fieldset>
        <div class="layui-row">
            <div class="layui-col-md10">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-form-label-sm">批次</label>
                            <div id="laddstubatch" class="layui-input-inline"></div>
                            <label class="layui-form-label layui-form-label-sm">院校</label>
                            <div id="laddstucollege" class="layui-input-inline"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-form-label-sm">专业</label>
                            <div id="laddstumajor" class="layui-input-inline"></div>
                            <label class="layui-form-label layui-form-label-sm">层次</label>
                            <div class="layui-input-inline">
                                <select name="level" id="laddstuidlevel">
                                    <option value=""></option>
                                    <option value="1">专升本</option>
                                    <option value="3">高起专</option>
                                    <option value="2">高起本</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-form-label-sm">阶段</label>
                            <div class="layui-input-inline">
                                <select id="laddstageId" name="stuidstage">
                                    <option value=""></option>
                                    <option value="14">考前</option>
                                    <option value="15">在籍</option>
                                    <option value="16">逾期毕业</option>
                                    <option value="17">已毕业</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="">
            <legend style="font-size: 15px; font-weight: bolder;">精准查询</legend>
        </fieldset>
        <div class="layui-row">
            <div class="layui-col-md10">
                <div class="layui-form-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-label-sm">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="stuName" autocomplete="off" class="layui-input"
                                   id="stuidstuname">
                        </div>
                        <label class="layui-form-label layui-form-label-sm">身份证</label>
                        <div class="layui-input-inline">
                            <input type="text" name="identity" autocomplete="off" class="layui-input"
                                   id="stuididentity">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label layui-form-label-sm">电话</label>
                        <div class="layui-input-inline">
                            <input type="text" name="tel" autocomplete="off" class="layui-input"
                                   id="stuidtel">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="user-add-form-submit" id="submit"></button>
            <button type="reset" class="layui-btn" id="reset"></button>
        </div>
    </form>
</div>

<script>
    layui.use(['febs', 'form', 'validate', 'xmSelect'], function () {
        let $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form,
            xmSelect = layui.xmSelect,
            validate = layui.validate,
            batchSelect,
            majorSelect,
            eamXmSelect;

        form.verify(validate);
        form.render();
        seteamXmSelect();
        setmajorSelect();
        setbatchSelect();

        function setbatchSelect() {
            batchSelect = xmSelect.render({
                el: '#laddstubatch',
                //toolbar: {show: true},
                name: 'batchId',
                filterable: true,
                radio: true,
                theme: {
                    color: '#32c787',
                },
                model: {
                    label: {
                        type: 'text',
                        text: {
                            //左边拼接的字符
                            left: '',
                            //右边拼接的字符
                            right: '',
                            //中间的分隔符
                            separator: ', ',
                        },
                    }
                },
                prop: {
                    name: 'batchName',
                    value: 'id'
                },
                data: []
            });
            febs.get('/student/batchList', null, function (data) {
                batchSelect.update({
                    data: data.data,
                    autoRow: true,
                })
            });
        }

        function seteamXmSelect() {
            eamXmSelect = xmSelect.render({
                el: '#laddstucollege',
                //toolbar: {show: true},
                name: 'collegeId',
                filterable: true,
                radio: true,
                theme: {
                    color: '#32c787',
                },
                model: {
                    label: {
                        type: 'text',
                        text: {
                            //左边拼接的字符
                            left: '',
                            //右边拼接的字符
                            right: '',
                            //中间的分隔符
                            separator: ', ',
                        },
                    }
                },
                prop: {
                    name: 'name',
                    value: 'id'
                },
                data: []
            });


            febs.get('/student/collegeList', null, function (data) {
                eamXmSelect.update({
                    data: data.data,
                    autoRow: true,
                })
            });
        }

        function setmajorSelect() {
            majorSelect = xmSelect.render({
                el: '#laddstumajor',
                name: 'majorId',
                filterable: true,
                radio: true,
                theme: {
                    color: '#32c787',
                },
                model: {
                    label: {
                        type: 'text',
                        text: {
                            //左边拼接的字符
                            left: '',
                            //右边拼接的字符
                            right: '',
                            //中间的分隔符
                            separator: ', ',
                        },
                    }
                },
                prop: {
                    name: 'fullName',
                    value: 'id'
                },
                data: []
            });

            febs.get('/student/majorList', null, function (data) {
                majorSelect.update({
                    data: data.data,
                    autoRow: true,
                })
            });
        }


        form.on('submit(user-add-form-submit)', function (data) {
            console.log(data.field.mediaLabelName);
            if (data.field.mediaLabelName != null && data.field.mediaLabelName != ''
            ) {
                $("#studentLabels").nextAll().remove();
                $.ajax({
                    type: "POST",
                    url: "student/createLabel",
                    data: {
                        mediaLabelName: data.field.mediaLabelName,
                        batchId: data.field.batchId,
                        collegeId: data.field.collegeId,
                        majorId: data.field.majorId,
                        level: data.field.level,
                        stageId: data.field.stuidstage,
                        stuName: data.field.stuName,
                        identity: data.field.identity,
                        tel: data.field.tel,
                    },
                    success: function (res) {
                        console.log(res);
                        layer.closeAll();
                        febs.alert.success('标签创建成功');
                        getStudentLabel();
                    }
                })
                return false;
            }
            else {
                febs.alert.warn('请给标签起名!');
            }
        });

        function getStudentLabel() {
            var h1 = "";
            $.ajax({
                type: "GET",
                url: "student/checkYourLabel/",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        h1 = $("<div class=\"layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain table-action\">\n" +
                            "<i class='add_project_student'  name='" + data[i].labelName + "' value='" + data[i].conditionContent + "'>" + data[i].labelName + "</i>" +
                            "<i> </i><i> </i><i class='del_project_student'  value='" + data[i].id + "'><i class='layui-icon'></i></i>" +
                            "</div>");
                        $("#studentLabels").after(h1);
                    }
                },
            });
        };
    });
</script>